<template>
  <el-container class="main_con  ">
    <div class="filter_con ds_block  ">
      <div class="filter_area ">
        <el-input size="medium" class="serach_input mr_15 mt_15" v-model="obj.agent_name" placeholder="分销商"></el-input>
        <label class="mr_15 mt_15">状态</label>
        <el-select size="medium" v-model="obj.status" placeholder="请选择" class="mr_15 mt_15">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <label class="mr_15 mt_15">创建时间</label>
        <date-picker size="medium" @change="getTime" class="mr_15 mt_15"></date-picker>
        <el-button size="medium" class="mr_15 mt_15" @click="searchList">搜索</el-button>
      </div>
    </div>
    <div class="list_con">
      <el-table @selection-change="selectItem" :data="list" element-loading-text="" fit highlight-current-row>
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="agent_name" label="分销商"></el-table-column>
        <el-table-column prop="withdraw" label="申请金额"></el-table-column>
        <el-table-column prop="service_charge" label="手续费"></el-table-column>
        <el-table-column prop="withdraw" label="实际到账">
          <template slot-scope="scope">
            <span>{{ scope.row | gettotal }}</span>
          </template>
        </el-table-column>
        <!--  <el-table-column label="类型">
          <template slot-scope="scope">
            {{scope.row.type == 1 ? '微信' : '支付宝'}}
          </template>
        </el-table-column> -->
        <el-table-column label="类型">
          <template slot-scope="scope">
            {{ scope.row.is_online == 1 ? '线上' : '线下' }}
          </template>
        </el-table-column>
        <el-table-column label="提现账号">
          <template slot-scope="scope">
            <span v-if="scope.row.is_online == 1">{{ scope.row.type == 1 ? '微信零钱' : '用户余额' }}</span>
            <template v-else>
              <span>{{ scope.row.card ? scope.row.card.name : '' }}:</span>
              <span>{{ scope.row.card ? scope.row.card.bank_no : '' }}</span>
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="serial_num" label="流水号"></el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column prop="status_text" label="状态"></el-table-column>
        <el-table-column prop="receipt_img" label="收款码">
          <template slot-scope="scope">
            <div v-if="scope.row.card" style="width: 60px;" @click="showreceipt_img(scope.row)"><img width="60px" :src="scope.row.card.receipt_img" /></div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <template v-if="scope.row.status == 0">
              <el-button v-has type="text" @click="operateItem(scope.row, 1)">打款通过</el-button>
              <el-button v-has type="text" @click="operateItem(scope.row, 2)">拒绝</el-button>
              <!-- <el-button type="text" @click="delItem(scope.row.id)">删除</el-button> -->
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="table_footer" v-show="total != 0">
        <!-- <el-button @click="delMul" size="medium">批量删除</el-button> -->
        <el-pagination @current-change="changePage" class="pages" background hide-on-single-page layout="prev, pager, next" :total="total"></el-pagination>
      </div>
    </div>
    <el-dialog title="收款码" destroy-on-close :visible.sync="showimg" width="30%">
      <div class="u-flex u-flex-col u-col-center">
        <img style="width:80%" v-if="detail.card" :src="detail.card.receipt_img" />
        <div class="tims">
          <span class="name">用户名:</span>
          <span>{{ detail.nickname }}</span>
        </div>
        <div class="tims">
          <span class="name">金额:</span>
          <span>{{ detail | gettotal }}</span>
        </div>
        <div class="tims">
          <span class="name">流水号:</span>
          <span>{{ detail.serial_num }}</span>
        </div>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import DatePicker from '@/components/DatePicker/index';
import {getWithdrawList, delWithdraw, operateWithdraw, getWithdraw} from '@/api/mall/commission';
export default {
  data() {
    return {
      options: [
        {
          value: -2,
          label: '全部'
        },
        {
          value: 0,
          label: '申请中'
        },
        {
          value: 1,
          label: '通过'
        },
        {
          value: 2,
          label: '拒绝'
        }
      ],
      obj: {
        //agent_id:'',
        agent_name: '',
        status: -2,
        begin_date: '',
        end_date: ''
      },
      objTemp: {},
      isLoading: false,
      list: [],
      total: 0,
      page: 1,
      size: 10,
      listSelected: [],
      detail: {},
      showimg: false
    };
  },
  components: {
    DatePicker
  },
  mounted() {
    this.searchList();
  },
  filters: {
    gettotal(data) {
      console.log(data);
      let a = 0;
      a = data.withdraw - data.service_charge;
      return a.toFixed(2);
    }
  },
  methods: {
    showreceipt_img(data) {
      this.detail = data;
      this.showimg = true;
    },
    //选择记录
    selectItem(selection) {
      this.listSelected = selection;
    },
    //搜索数据
    searchList() {
      this.objTemp = Object.assign({}, this.obj);
      //处理过滤status字段
      if (this.objTemp.status == -2) {
        delete this.objTemp.status;
      }

      //处理空字段
      // Object.keys(this.objTemp).forEach(key => {
      //   if(this.objTemp[key] == '' && typeof(this.objTemp[key]) == 'string'){
      //     delete this.objTemp[key];
      //   };
      // });

      this.getDataList();
    },
    //查询数据本体
    getDataList() {
      this.isLoading = true;
      getWithdrawList(this.objTemp, this.page, this.size).then(res => {
        this.isLoading = false;
        let o = res.msg;
        let list = o.data;
        list.forEach(a => {
          a.card = JSON.parse(a.card);
        });
        this.list = list;
        this.total = o.total;
      });
    },
    //切换分页
    changePage(page) {
      this.page = page;
      this.getDataList();
    },
    //获取时间
    getTime(value) {
      this.obj.begin_date = value[0];
      this.obj.end_date = value[1];
    },
    //操作数据(通过/拒绝)
    operateItem(item, type) {
      let s = '';
      let ob = {};

      //获取目标记录数据
      this.isLoading = true;
      getWithdraw(item.id).then(res => {
        this.isLoading = false;
        ob.id = res.msg.id;
        ob.update_time = res.msg.update_time;
      });

      switch (type) {
        case 1:
          //通过
          s = '是否确认通过该记录?';
          ob.status = 1;
          break;
        case 2:
          //拒绝
          s = '是否确认拒绝该记录?';
          ob.status = 2;
          break;
        default:
          //no code
          break;
      }

      //处理函数
      this.$confirm(s).then(_ => {
        this.isLoading = true;
        operateWithdraw(ob).then(res => {
          this.isLoading = false;
          this.getDataList();
        });
      });
    },
    //删除记录
    delItem(id) {
      this.$confirm('是否确认删除该记录?').then(_ => {
        this.isLoading = true;
        delWithdraw(id).then(res => {
          this.isLoading = false;
        });
      });
    },
    //批量删除
    delMul() {
      this.$alert('功能暂未开发!');
    }
  }
};
</script>

<style lang="scss" scoped>
.list_con {
  border-top: 1px solid #f2f2f2;
}
</style>
